<template>
  <div class="app-container">
    <div class="fixedColumn">
      <img src="../../../assets/images/logo_detail.png" alt="" class="w_100" v-if="dataInfo.gender == null">
      <img src="../../../assets/images/boy.png" alt="" class="w_100" v-if="dataInfo.gender == 'Male'">
      <img src="../../../assets/images/girl.png" alt="" class="w_100" v-if="dataInfo.gender == 'Female'">
    </div>
    <div class="flxeibleColumn marginLeft150">
         <el-col :span="24" class="box-card">
           <el-card>
             <div slot="header" style="padding: 0px;">
               <span class="font_bold">BASIC INFO.</span>
               <el-popover
                 placement="bottom"
                 popper-class="popoverDiv"
                 v-model="AndonBtnStatus"
                 title="Please submit your questions"
                 width="365"
                 trigger="click"
                 content="">
                 <el-input
                   type="textarea"
                   placeholder="Please enter"
                   v-model="textarea2">
                 </el-input>
                 <el-button class="SubmitBtn" :disabled="subMitStatus" @click="subMit">Submit</el-button>
                 <el-button slot="reference"  class="AndonBtn">Andon</el-button>
               </el-popover>
             </div>
             <div class="el-table el-table--enable-row-hover el-table--medium cardInfo">
              <el-row :gutter="20">
                <el-col :span="8">
                       <span class="cell cell-header">Customer #:</span>
                       <span class="cell">{{dataInfo.custNo}}</span>
                 </el-col>
                <el-col :span="8">
                         <span class="cell cell-header">Registration mobile #:</span>
                         <span class="cell">{{dataInfo.registrationMobile}}</span>
                 </el-col>
                 <el-col :span="8">
                         <span class="cell cell-header">Registration time:</span>
                         <span class="cell">{{dataInfo.registrationTime}}</span>
                 </el-col>

               </el-row>


               <el-row :gutter="20">
                 <el-col :span="8">
                       <span class="cell cell-header">Client name:</span>
                       <span class="cell">{{dataInfo.clientName}}</span>
                 </el-col>
                 <el-col :span="8">
                         <span class="cell cell-header">Gender:</span>
                         <span class="cell">{{dataInfo.gender}}</span>
                 </el-col>
                 <el-col :span="8">
                       <span class="cell cell-header">BVN Mobile:</span>
                       <span class="cell">{{dataInfo.mobile}}</span>
                 </el-col>

               </el-row>
               <el-row :gutter="20">
                 <el-col :span="8">
                     <span class="cell cell-header">Date of birth:</span>
                     <span class="cell">{{dataInfo.birthDate}}</span>
                 </el-col>
                 <el-col :span="8">
                     <span class="cell cell-header">Age:</span>
                     <span class="cell">{{dataInfo.age}}</span>
                 </el-col>

                 <el-col :span="8">
                      <span class="cell cell-header">BVN:</span>
                      <span class="cell color_13C66C">{{dataInfo.bvn}}
                         <img v-if="dataInfo.bvn" src="../../../assets/images/bvn_yes.png" alt="" style="vertical-align: sub;">
                      </span>
                  </el-col>
               </el-row>
               <el-row :gutter="20">
                <el-col :span="8">
                      <span class="cell cell-header">E-mail address:</span>
                      <span class="cell">{{dataInfo.email}}</span>
                </el-col>
                <!-- <el-col :span="8">
                    <span class="cell cell-header">Real-name time:</span>
                    <span class="cell">{{dataInfo.realNameTime}}</span>
                </el-col> -->
                 <el-col :span="8">
                       <span class="cell cell-header">Version:</span>
                       <span class="cell">{{dataInfo.version}}</span>
                 </el-col>
                 <el-col :span="8">
                       <span class="cell cell-header">Total limit:</span>
                       <el-popover
                           placement="bottom"
                           title="Credit Info."
                           width="215"
                           trigger="click"
                           content="">
                           <div class="cardInfo">
                              <p style="width: 100%;border-bottom: 1px solid #DDDDDD;"></p>
                             <p>
                               <span class="cell cell-header"    >Available limit:</span>
                               <span class="cell"                > {{dataInfo.availableLimit || ' '}}</span>
                             </p>
                             <p>
                               <span class="cell cell-header">Outstanding limit:</span>
                               <span class="cell"> {{dataInfo.borrowed}}</span>
                             </p>
<!--                             <p>-->
<!--                               <span class="cell cell-header">Balance:</span>-->
<!--                               <span class="cell"> {{dataInfo.overflowAmount}}</span>-->
<!--                             </p>-->
                             <!-- <p>
                               <span class="cell cell-header">Overpayment:</span>
                               <span class="cell"> 取值</span>
                             </p> -->
                             <p>
                               <span class="cell cell-header">Refundable amount:</span>
                               <span class="cell"> {{dataInfo.overflowAmount-dataInfo.frozenOverflowAmount}}</span>
                             </p>
<!--                             <p>
                               <span class="cell cell-header">Interest:</span>
                               <span class="cell"> {{dataInfo.interest}}</span>
                             </p>-->
                             <p>
                               <span class="cell cell-header">credit rating: </span>
                               <span class="cell"> <span style="color:#13C66C"> {{dataInfo.nowCreditRating}} </span>
                                                   <span style="color: #CCCCCC;">(last:{{dataInfo.beforeCreditRating}})</span>
                               </span>
                             </p>
                           </div>
                           <span class="cell" style="cursor: pointer;" slot="reference">₦ {{dataInfo.totalLimit || '0'}}</span>
                         </el-popover>
                 </el-col>
               </el-row>
<!--               <el-row>-->
<!--                 <span class="cell cell-header">Invitation code:</span>-->
<!--                 <span class="cell">{{dataInfo.recommendCode}}</span>-->
<!--                 <span class="cell" v-if="dataInfo.recommendCode != null">{{dataInfo.inviteCodeStatus == '1' ? "(Effective)" : "(Invalid)"}}</span>-->
<!--               </el-row>-->
               <el-row :gutter="20">
                 <el-col :span="8">
                   <span class="cell cell-header">Invitation code:</span>
                   <span class="cell">{{dataInfo.recommendCode}}</span>
                   <span class="cell" v-if="dataInfo.recommendCode != null">{{dataInfo.inviteCodeStatus == '1' ? "(Effective)" : "(Invalid)"}}</span>
                 </el-col>
                 <el-col :span="8">
                   <span class="cell cell-header">Level:</span>
                   <span class="cell">{{dataInfo.level}}</span>
                 </el-col>
                 <el-col :span="8" placement="bottom">
                   <span class="cell cell-header">Wallet:</span>
                   <span class="cell" style="color: #EAC600;" @click="walletInfo()">₦ {{dataInfo.walletAmount || '0'}}</span>
                 </el-col>
               </el-row>
             </div>
           </el-card>
         </el-col>

         <br>

        <!-- <el-col :span="24" class="box-card">
           <el-card>
             <div slot="header">
               <span class="font_bold">ACCOUNT INFO.</span>
             </div>
             <div class="el-table el-table--enable-row-hover el-table--medium cardInfo">
               <el-row :gutter="20">
                 <el-col :span="8">
                       <span class="cell cell-header">Total limit:</span>
                       <span class="cell">{{dataInfo.totalLimit || ' '}}</span>
                 </el-col>
                 <el-col :span="8">
                         <span class="cell cell-header">Available limit:</span>
                         <span class="cell">{{dataInfo.availableLimit || ' '}}</span>
                 </el-col>
                 <el-col :span="8">
                     <span class="cell cell-header">Borrowed:</span>
                     <span class="cell">{{dataInfo.borrowed || ' '}}</span>
                 </el-col>
               </el-row>

               <el-row :gutter="20">
                 <el-col :span="8">
                       <span class="cell cell-header">Validity:</span>
                       <span class="cell">{{dataInfo.validity}}</span>
                 </el-col>
                 <el-col :span="8">
                         <span class="cell cell-header">Application number:</span>
                         <span class="cell">{{dataInfo.applyCount}}</span>
                 </el-col>
                 <el-col :span="8">
                     <span class="cell cell-header">Last Application Time:</span>
                     <span class="cell">{{dataInfo.creditApplayCreatetime}}</span>
                 </el-col>
               </el-row>

               <el-row :gutter="20">
                 <el-col :span="8">
                       <span class="cell cell-header">Balance:</span>
                       <span class="cell">{{dataInfo.overflowAmount}}</span>
                 </el-col>
                 <el-col :span="16">
                         <span class="cell cell-header">State:</span>
                         <span :class="dataInfo.nextCredit && dataInfo.nextCredit.indexOf('Note') != -1? 'cell bgc' : 'cell'">{{dataInfo.nextCredit}} </span>
                 </el-col>
               </el-row>
               <el-row :gutter="20">
                 <el-col :span="16">
                         <span class="cell cell-header">Refundable amount:</span>
                         <span class="cell">{{dataInfo.overflowAmount-dataInfo.frozenOverflowAmount}} </span>
                 </el-col>
               </el-row>
             </div>
           </el-card>
         </el-col> -->
    </div>


    <!-- <el-card class="box-card" style="padding: 0px;"> -->
      <!--LOAN INFO -->
      <el-dialog title="" :visible.sync="loan" custom-class="cmlDetails">
        <!-- <div class="fixedColumn">
          <img src="../../../assets/images/logo_detail.png" alt="" class="w_100">
        </div> -->
        <div class="flxeibleColumn">
            <el-card>
              <div slot="header">
                <span class="font_bold">LOAN INFO.</span>
                <span style="float: right;">
                  <span style="margin-right: 7px;"> Status:</span>
                  <!-- <span> {{statusTitle}}</span> -->
                  <span style="color: #FF4646;" v-if="statusTitle =='Failure'" >Failure</span>
                  <span style="color: #13C66C;" v-if="statusTitle =='Finish'" >Finish</span>
                  <span style="color: #EA7807;"  v-if="statusTitle =='Overdue'" >Overdue</span>
                  <span style="color: #EAC600;" v-if="statusTitle =='Outstanding'" >Outstanding</span>
                  <span style="color: #EAC600;" v-if="statusTitle =='Processing'" >Processing</span>
                </span>
              </div>
              <div class="el-table el-table--enable-row-hover el-table--medium cardInfo">
                 <el-row :gutter="20">
                   <el-col :span="12">
                         <span class="cell cell-header">Loan Amount:</span>
                         <span class="cell">{{RowloanDataInfo.loanAmount}}</span>
                   </el-col>
                   <el-col :span="12">
                           <span class="cell cell-header">Application time:</span>
                           <span class="cell">{{RowloanDataInfo.applicationTime}}</span>
                   </el-col>
                 </el-row>
                <el-row :gutter="20">
                   <el-col :span="12">
                         <span class="cell cell-header">Account Number:</span>
                         <span class="cell">{{RowloanDataInfo.accountNumber}}</span>
                   </el-col>
                   <el-col :span="12">
                           <span class="cell cell-header">Applicant:</span>
                           <span class="cell">{{RowloanDataInfo.applicant}}</span>
                   </el-col>
                 </el-row>
                 <el-row :gutter="20">
                   <el-col >
                         <span class="cell cell-header">Payment time：</span>
                         <span class="cell">{{RowloanDataInfo.paymentTime}}</span>
                   </el-col>
                 </el-row>
              </div>
            </el-card>
            <br/>
            <el-card>
              <div slot="header">
                <span class="font_bold">REPAYMENT INFO.</span>
              </div>
              <div class="el-table el-table--enable-row-hover el-table--medium cardInfo">
               <el-row :gutter="20">
                  <el-col :span="12">
                        <span class="cell cell-header">Loan duration:</span>
                        <span class="cell">{{RowloanDataInfo.loanDuration}} {{RowloanDataInfo.unit}}</span>
                  </el-col>
                  <el-col :span="12">
                          <span class="cell cell-header">Repayment date:</span>
                          <span class="cell">{{RowloanDataInfo.repaymentTime}}</span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                        <span class="cell cell-header">Repayment amount:</span>
                        <span class="cell  color_EA7807"><span v-if="RowloanDataInfo.repaymentAmount">₦</span>{{RowloanDataInfo.repaymentAmount}}</span>
                  </el-col>
                  <el-col :span="12">
                      <el-row >
                        <span class="cell cell-header">Principal:</span>
                        <span class="cell"><span v-if="RowloanDataInfo.principal">₦</span> {{RowloanDataInfo.principal}}</span>
                      </el-row>
                      <el-row>
                        <span class="cell cell-header">Interest:</span>
                        <span class="cell"><span v-if="RowloanDataInfo.interest">₦</span> {{RowloanDataInfo.interest}}</span>
                      </el-row>
                      <el-row>
                        <span class="cell cell-header">Service fee:</span>
                        <span class="cell"><span v-if="RowloanDataInfo.serviceFee">₦</span> {{RowloanDataInfo.serviceFee}}</span>
                      </el-row>
                     <el-row>
                        <span class="cell cell-header">Penalty:</span>
                        <span class="cell"><span v-if="RowloanDataInfo.penalty">₦</span> {{RowloanDataInfo.penalty}}</span>
                      </el-row>
                      <el-row>
                        <span class="cell cell-header">Transaction fee:</span>
                        <span class="cell"><span v-if="RowloanDataInfo.transationFree">₦</span> {{RowloanDataInfo.transationFree || ' '}}</span>
                      </el-row>
                      <el-row>
                        <span class="cell cell-header">Coupon:</span>
                        <span class="cell">{{RowloanDataInfo.coupon || ' '}}</span>
                      </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-card>

            <!-- <div slot="footer" class="dialog-footer">
              <el-button @click="loan = false">关闭</el-button>
            </div> -->
        </div>

      </el-dialog>

      <br>

     <!-- <div slot="header" class="clearfix">
        <span>Loan History</span><br>
      </div>
      <el-table v-loading="loading" :data="dataList" :stripe='true'>
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="#" align="center" prop="custNo"/>
        <el-table-column label="#" type="index" align="center" show-overflow-tooltip width="50px"></el-table-column>
        <el-table-column label="Application time" align="center" prop="createTime"/>
        <el-table-column label="Loan Amount" align="center" prop="loanAmt"/>
        <el-table-column label="State" align="center" prop="state"/>
        <el-table-column label="Repayment date" align="center" prop="repayDate"/>
        <el-table-column label="Operation" align="center" width="140" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              type="warning"
              plain
              icon="el-icon-view"
              v-hasPermi="['business:loanIou:loandetail']"
              @click="loanInfo(scope.row)"
              size="small"
            >Details
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      /> -->

      <!-- </el-card> -->


          <el-card class="cardTab" v-loading="loading">
          <el-tabs type="card"  v-model="activeName" @tab-click="tabClickChangeFun()" >
           <el-tab-pane :disabled="KYCStatus" label="KYC" name="one" v-loading="tabLoading">
             <el-table v-loading="loading" :data="KYCList" :stripe='true'>
               <el-table-column width="20" label="#" align="center" type="index"/>
               <el-table-column label="Firstname" align="center" prop="firstName"/>
               <el-table-column label="Middlename" prop="middleName"/>
               <el-table-column label="Lastname" align="center" prop="lastName"/>
               <el-table-column label="DateOfBirth" align="center" prop="birthDate"/>
               <el-table-column label="Age" width="50px" align="center" prop="age"/>
               <el-table-column label="Gender" align="center" width="80px" prop="gender"/>
               <el-table-column label="BVN" align="center" width="60" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
                   <span style="cursor: pointer;">
                     {{scope.row.bvnAccount}}
                   </span>
                 </template>
               </el-table-column>

              <el-table-column label="PhoneNumber" align="center" prop="phoneNumber"/>
              <el-table-column label="AccountNumber" align="center" prop="accountNumber"/>
              <el-table-column label="Date" align="center" prop="createTime"/>
              <el-table-column label="Status" align="center" prop="state">
                <template slot-scope="scope">
                  <span v-if="scope.row.state == 'Succeed'" style="color: #13C66C;cursor: no-drop;">
                    {{scope.row.state}}
                  </span>
                  <el-popover
                    v-else
                    placement="bottom"
                    title=""
                    width="400"
                    trigger="click"
                    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <div class="tablePopover">
                      <el-row :gutter="20">
                        <el-col :span="12" class="title">Reason</el-col>
                        <el-col :span="12" class="title">Reply template</el-col>
                      </el-row>
                      <el-row :gutter="20">
                        <el-col class="text wordBreak" :span="12" style="border-right: 1px solid #000000;" >{{scope.row.behavior}}</el-col>
                        <el-col class="text wordBreak" :span="12">
                          {{scope.row.dictate}}
                        </el-col>
                      </el-row>
                      <el-row :gutter="20">
                        <el-col :span="12" class="title"></el-col>
                        <el-col :span="12" class="title">
                          <div class="title" style="margin-top: 20px;">
                            Verified BVN phone
                          </div>
                          <div class="text wordBreak">
                            {{scope.row.bvnPhone}}
                          </div>
                        </el-col>
                      </el-row>
                      <!-- <button type="button" class="updatedBtn">Information updated</button> -->
                    </div>
                    <span slot="reference" style="color: #FF4646;cursor: pointer;">{{scope.row.state}}</span>
                  </el-popover>
                </template>
              </el-table-column>
             </el-table>
             <pagination
               v-show="KYCtotal>0"
               :total="KYCtotal"
               :page.sync="KYCParams.pageNum"
               :limit.sync="KYCParams.pageSize"
               @pagination="KYCgetList"
             />
           </el-tab-pane>
           <el-tab-pane :disabled="GetlimitStatus"  label="Get limit" name="two">
             <el-table v-loading="loading" :data="GetlimitList" :stripe='true'>
                <el-table-column label="#" width="30" align="center" type="index"/>
                <el-table-column label="SerialNo" align="center" prop="applySerialNo"/>
                <el-table-column label="Date" align="center" prop="createTime"/>
               <el-table-column label="Status" align="center" prop="applyStatus">
                 <template slot-scope="scope">
                   <span style="color: #13C66C;cursor: no-drop;" v-if='scope.row.applyStatus == 1'>
                     Succeed
                   </span>
                   <span style="color: #EAC600;cursor: no-drop;" v-if='scope.row.applyStatus == 9'>
                     Under review
                   </span>
                   <el-popover
                     v-if='scope.row.applyStatus == 0'
                     placement="bottom"
                     title=""
                     width="400"
                     trigger="click"
                     content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <div class="tablePopover">
                       <el-row :gutter="20">
                         <el-col :span="12" class="title">Reason</el-col>
                         <el-col :span="12" class="title">Reply template</el-col>
                       </el-row>
                       <el-row :gutter="20">
                         <el-col class="text wordBreak" :span="12" style="border-right: 1px solid #000000;" >{{scope.row.behavior}}</el-col>
                         <el-col class="text wordBreak" :span="12">{{scope.row.dictate}}</el-col>
                       </el-row>
                     </div>
                     <span slot="reference"  style="color: #FF4646; cursor: pointer;">Failure</span>
                   </el-popover>

                 </template>
               </el-table-column>
              </el-table>
              <pagination
                v-show="Getlimittotal>0"
                :total="Getlimittotal"
                :page.sync="GetlimitParams.pageNum"
                :limit.sync="GetlimitParams.pageSize"
                @pagination="GetlimitgetList"
              />
           </el-tab-pane>
           <el-tab-pane :disabled="AccountBankStatus" label="Bank Account" name="three">
              <el-table v-loading="loading" :data="AccountBankList" :stripe='true'>
                 <el-table-column label="#" width="30" align="center" type="index"/>
                 <el-table-column label="AccountNumber" align="center" prop="accountNumber"/>
                 <el-table-column label="Bank name" align="center" prop="bankName"/>
                <el-table-column label="Date" align="center" prop="createTime">
                </el-table-column>
               </el-table>
               <pagination
                 v-show="AccountBanktotal>0"
                 :total="AccountBanktotal"
                 :page.sync="AccountBankParams.pageNum"
                 :limit.sync="AccountBankParams.pageSize"
                 @pagination="AccountBankgetList"
               />
           </el-tab-pane>
           <el-tab-pane :disabled="ATMCardStatus" label="ATM Card" name="four">
              <el-table v-loading="loading" :data="ATMCardList" :stripe='true'>
                 <el-table-column width="30" label="#" align="center" type="index"/>
                 <el-table-column label="SerialNo" align="center" prop="serialNo"/>
                 <el-table-column label="CardNumber" prop="cardNumber" align="center"/>
                 <el-table-column label="Bank name" align="center" prop="bankName"/>
                 <el-table-column label="TransAmt" align="center" prop="transAmt"/>
                 <el-table-column label="Date"  align="center" prop="createTime"/>
                <el-table-column label="Status" align="center" prop="status">
                  <template slot-scope="scope">
                    <span style="color: #13C66C;" v-if="scope.row.status == 'Valid card'"> Valid card</span>
                    <span style="color: #EAC600;" v-if="scope.row.status == 'Processing'"> Processing</span>
                    <el-popover
                    v-if="scope.row.status == 'Failure' || scope.row.status == 'Invalid card'"
                      placement="bottom"
                      title=""
                      width="400"
                      trigger="click"
                      content="">
                      <div class="tablePopover">
                         <el-row :gutter="20">
                           <el-col :span="12" class="title">Reason</el-col>
                           <el-col :span="12" class="title">Reply template</el-col>
                         </el-row>
                         <el-row :gutter="20">
                           <el-col class="text wordBreak" :span="12" style="border-right: 1px solid #000000;" >{{scope.row.behavior}}</el-col>
                           <el-col class="text wordBreak" :span="12">{{scope.row.dictate}}</el-col>
                         </el-row>
                       </div>
                      <span slot="reference" style="color: #FF4646;cursor: pointer;">{{scope.row.status}}</span>
                    </el-popover>
                  </template>
                </el-table-column>
               </el-table>
               <pagination
                 v-show="ATMCardtotal>0"
                 :total="ATMCardtotal"
                 :page.sync="ATMCardParams.pageNum"
                 :limit.sync="ATMCardParams.pageSize"
                 @pagination="ATMCardgetList"
               />
           </el-tab-pane>
           <el-tab-pane :disabled="LoanHistoryStatus" label="Loan History" name="five">
              <el-table v-loading="loading" :data="LoanHistoryList" :stripe='true'>
                 <el-table-column width="30" label="#" align="center" type="index"/>
                 <el-table-column label="Application time" align="center" prop="createTime"/>
                 <el-table-column label="Loan Amount"  align="center"  prop="loanAmt"/>
                 <el-table-column label="Status" align="center" prop="state">
                   <template slot-scope="scope">
                     <el-popover
                     v-if="scope.row.state =='Failure'"
                       placement="bottom"
                       title=""
                       width="400"
                       trigger="click"
                       content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                       <div class="tablePopover">
                          <el-row :gutter="20">
                            <el-col :span="12" class="title">Reason</el-col>
                            <el-col :span="12" class="title">Reply template</el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col class="text wordBreak" :span="12" style="border-right: 1px solid #000000;" >{{scope.row.behavior}}</el-col>
                            <el-col class="text wordBreak" :span="12">{{scope.row.dictate}}</el-col>
                          </el-row>
                        </div>
                       <span slot="reference" style="color: #FF4646;">Failure</span>
                     </el-popover>
                     <span style="color: #13C66C;" v-if="scope.row.state =='Finish'" @click="DebitFun(scope.row.id,scope.row.state)">Finish</span>
                    <span style="color: #EA7807;"  v-if="scope.row.state =='Overdue'" @click="DebitFun(scope.row.id,scope.row.state)">Overdue</span>
                     <span style="color: #EAC600;" v-if="scope.row.state =='Outstanding'" @click="DebitFun(scope.row.id,scope.row.state)">Outstanding</span>
                     <span style="color: #EAC600;" v-if="scope.row.state =='Processing'" @click="DebitFun(scope.row.id,scope.row.state)">Processing</span>
                   </template>
                 </el-table-column>
                 <el-table-column label="Repayment Status" align="center"  class-name="small-padding fixed-width">
                   <template slot-scope="scope">
                     <el-button
                       type="warning"
                       plain
                       icon="el-icon-view"
                       v-hasPermi="['business:loanIou:loandetail']"
                       @click="loanInfo(scope.row)"
                       size="small"
                     >View
                     </el-button>
                   </template>
                 </el-table-column>
               </el-table>
               <pagination
                 v-show="LoanHistorytotal>0"
                 :total="LoanHistorytotal"
                 :page.sync="LoanHistoryParams.pageNum"
                 :limit.sync="LoanHistoryParams.pageSize"
                 @pagination="LoanHistorygetList"
               />
           </el-tab-pane>
            <el-tab-pane :disabled="WalletHistoryStatus" label="Wallet Order" name="six">
              <el-table v-loading="loading" :data="WalletHistoryList" :stripe='true'>
<!--                <el-table-column width="80" label="#" align="center" type="index"/>-->
                <el-table-column label="Order Type" align="center" prop="orderType" :formatter="orderTypeFormat" width="160px"/>
                <el-table-column label="Amount"  align="center"  prop="walletAmount" width="160px"/>
                <el-table-column label="Service fee"  align="center"  prop="walletServiceFee" width="160px"/>
                <el-table-column label="Wallet Type"  align="center"  prop="walletType" :formatter="walletTypeFormat" width="160px"/>
                <el-table-column label="Bank account"  align="center"  prop="bankAccount" width="160px"/>
                <el-table-column label="Bank name"  align="center"  prop="bankName" width="160px"/>
                <el-table-column label="create Time"  align="center" prop="createTime" width="220px"/>
                <el-table-column label="update Time"  align="center" prop="updateTime" width="220px"/>
<!--                <el-table-column label="Status" align="center" prop="orderStatus" :formatter="orderStatusFormat"/>-->
                <el-table-column label="Status" align="center" prop="orderStatus" width="160px">
                  <template slot-scope="scope">
                    <span v-if="scope.row.orderStatus == '0'" style="color: #cc1e11;cursor: no-drop;">Rejected</span>
                    <span v-if="scope.row.orderStatus == '1'" style="color: rgba(232,215,26,0.96);cursor: no-drop;">Approved</span>
                    <span v-if="scope.row.orderStatus == '2'" style="color: rgba(232,215,26,0.96);cursor: no-drop;">Pending</span>
                    <span v-if="scope.row.orderStatus == '3'" style="color: #13C66C;cursor: no-drop;">Success</span>
                    <span v-if="scope.row.orderStatus == '4'" style="color: #cc1e11;cursor: no-drop;" >Failed</span>
                    <span v-if="scope.row.orderStatus == '5'" style="color: rgba(232,215,26,0.96);cursor: no-drop;" >Retry</span>
                    <span v-if="scope.row.orderStatus == '6'" style="color: rgba(232,215,26,0.96);cursor: no-drop;" >Repay pending</span>
                    <span v-if="scope.row.orderStatus == '7'" style="color: rgba(232,215,26,0.96);cursor: no-drop;" >Deferred repay pending</span>
                    <span v-if="scope.row.orderStatus == '9'" style="color: rgba(232,215,26,0.96);cursor: no-drop;">Under review</span>
                      <el-popover
                        placement="top-start"
                        title="Reason"
                        width="200"
                        trigger="hover"
                        content="Please go to your bank to update and try again">
                        <el-button class="cell" slot="reference" type="text" v-if="scope.row.orderStatus == '0'" style="color: #cc1e11;cursor: no-drop;"  >Rejected</el-button>
                      </el-popover>
                  <span v-if="scope.row.orderStatus == '5'" style="color: rgba(232,215,26,0.96);cursor: no-drop;">Retry</span>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="WalletHistorytotal>0"
                :total="WalletHistorytotal"
                :page.sync="WalletHistoryParams.pageNum"
                :limit.sync="WalletHistoryParams.pageSize"
                @pagination="WalletHistorygetList"
              />
            </el-tab-pane>
          </el-tabs>
          </el-card>

    <!-- 钱包明细>-->
    <el-dialog title="" :visible.sync="WalletDebit" custom-class="cmlDetails">
      <div class="flxeibleColumn">
        <el-card>
          <div slot="header">
            <span class="font_bold">WALLET INFO.</span>
            <span style="float: right;">
              <span style="margin-right: 7px;"> Status:</span>
              <span class="cell" style="color: #FF4646;" v-if="WalletDataInfo.walletStatus =='0'">Lock</span>
              <span class="cell" style="color: #13C66C;" v-if="WalletDataInfo.walletStatus =='1'">Normal</span>
            </span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium cardInfo">
            <el-row :gutter="24">
              <el-col :span="12">
                <span class="cell cell-header">Total amount:</span>
                <span class="cell" style="color: #13C66C;">₦ {{ WalletDataInfo.totalAmount }}</span>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <span class="cell cell-header">Balance:</span>
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="Reach 100 ₦ can be withdrawn" >
                  <el-button class="cell" slot="reference" type="text" style="color: #090909;">₦ {{ WalletDataInfo.balance }}</el-button>
                </el-popover>
                <span class="cell" style="color: #13C66C;" v-if="WalletDataInfo.walletStatus =='1'">(Normal)</span>
                <span class="cell" style="color: #FF4646;" v-if="WalletDataInfo.walletStatus =='2'">(Lock)</span>
              </el-col>
              <el-col :span="8">
                  <span class="cell cell-header">Available balance:</span>
                  <span class="cell">₦ {{ WalletDataInfo.availableBalance }}</span>
              </el-col>
              <el-col :span="8">
                <span class="cell cell-header">Frozen balance:</span>
                <span class="cell">₦ {{ WalletDataInfo.frozenBalance }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <span class="cell cell-header">Bonus:</span>
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  content="Reach 20,000 ₦ can be withdrawn">
                  <el-button class="cell" slot="reference" type="text" style="color: #090909;">₦ {{ WalletDataInfo.bonus }}</el-button>
                </el-popover>
                <span class="cell" style="color: #13C66C;" v-if="WalletDataInfo.walletStatus =='1'">(Normal)</span>
                <span class="cell" style="color: #FF4646;" v-if="WalletDataInfo.walletStatus =='3'">(Lock)</span>
              </el-col>
              <el-col :span="8">
                <span class="cell cell-header">Available bonus:</span>
                <span class="cell">₦ {{ WalletDataInfo.availableBonus }}</span>
              </el-col>
              <el-col :span="8">
                <span class="cell cell-header">Frozen bonus:</span>
                <span class="cell">₦ {{ WalletDataInfo.frozenBonus }}</span>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <br/>
        <el-card>
          <div slot="header">
            <span class="font_bold"></span>
          </div>
          <div class=" DebitTable el-table el-table--enable-row-hover el-table--medium cardInfo">
            <el-table
              :data="WalletDebitList"
              style="width: 100%">
              <el-table-column prop="changeType" label="Change Type" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.changeType == '2'" style="color: #cc1e11;cursor: no-drop;" >expense</span>
                  <span v-if="scope.row.changeType == '1'" style="color: rgba(44,197,26,0.96);cursor: no-drop;">income</span>
                </template>
              </el-table-column>
              <el-table-column prop="fundsType" label="Funding Type" :formatter="fundsTypeFormat" width="150px"></el-table-column>
              <el-table-column prop="walletType" label="Wallet Type" :formatter="walletTypeFormat"></el-table-column>
              <el-table-column prop="changeAmount" label="Amount"></el-table-column>
              <el-table-column prop="createTime" label="Creation Time" width="220px"></el-table-column>
            </el-table>
            <pagination
              v-show="WalletInfototal>0"
              :total="WalletInfototal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </el-card>
      </div>
    </el-dialog>

<!--    延期产品offer详情-->
    <el-dialog title="" :visible.sync="DeferredDebit" custom-class="cmlDetails">
      <div class="flxeibleColumn">
        <el-card>
          <div slot="header">
            <span class="font_bold">Extension .</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium cardInfo">
            <el-row :gutter="20">
              <el-col :span="12">
                <span class="cell cell-header">Seven Extension Days:</span>
                <span class="cell" > {{ DeferredDataInfo.sevenExtensionDays }} days</span>
              </el-col>
              <el-col :span="12">
                <span class="cell cell-header">Fourteen Extension Days:</span>
                <span class="cell" > {{ DeferredDataInfo.fourteenExtensionDays }} days</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <span class="cell cell-header">Seven Min Repay:</span>
                <span class="cell" style="color: #EAC600;">₦ {{ DeferredDataInfo.sevenMinRepay }}</span>
              </el-col>
              <el-col :span="12">
                <span class="cell cell-header">Fourteen Min Repay:</span>
                <span class="cell" style="color: #EAC600;">₦ {{ DeferredDataInfo.fourteenMinRepay }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <span class="cell cell-header">Seven Repayment Date:</span>
                <span class="cell">{{ DeferredDataInfo.sevenRepaymentDate }}</span>
              </el-col>
              <el-col :span="12">
                <span class="cell cell-header">Fourteen Repayment Date:</span>
                <span class="cell">{{ DeferredDataInfo.fourteenRepaymentDate }}</span>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </el-dialog>

          <!-- 还款详情 -->
          <el-dialog title="" :visible.sync="Debit" custom-class="cml">
            <!-- <div class="fixedColumn">
              <img src="../../../assets/images/logo_detail.png" alt="" class="w_100">
            </div> -->
            <div class="flxeibleColumn">
                <el-card>
                  <div slot="header">
                    <span class="font_bold">LOAN INFO.</span>
                    <span style="float: right;">
                      <span style="margin-right: 7px;"> Status:</span>
                      <!-- <span> {{statusTitle}}</span> -->
                      <span  class="font_bold" style="color: #FF4646;" v-if="statusTitle =='Failure'" >Failure</span>
                      <span class="font_bold" style="color: #13C66C;" v-if="statusTitle =='Finish'" >Finish</span>
                      <span class="font_bold" style="color: #EA7807;"  v-if="statusTitle =='Overdue'" >Overdue</span>
                      <span class="font_bold" style="color: #EAC600;" v-if="statusTitle =='Outstanding'" >Outstanding</span>
                      <span class="font_bold" style="color: #EAC600;" v-if="statusTitle =='Processing'" >Processing</span>
                    </span>
                  </div>
                  <div class="el-table el-table--enable-row-hover el-table--medium cardInfo">
                     <el-row :gutter="24">
                       <el-col :span="8">
                             <span class="cell cell-header">Loan Amount:</span>
                             <span class="cell" style="color: #EAC600;">₦ {{ RowloanDataInfo.loanAmount}}</span>
                       </el-col>
                       <el-col :span="8">
                         <span class="cell cell-header">Applicant:</span>
                         <span class="cell">{{RowloanDataInfo.applicant}}</span>
                       </el-col>
                       <el-col :span="8">
                         <span class="cell cell-header">Account Number:</span>
                         <span class="cell">{{RowloanDataInfo.accountNumber}}</span>
                       </el-col>
                     </el-row>
                     <el-row :gutter="24">
                       <el-col :span="8">
                         <span class="cell cell-header">Loan duration:</span>
                         <span class="cell">{{RowloanDataInfo.loanDuration}} {{RowloanDataInfo.unit}}</span>
                       </el-col>
                       <el-col :span="8">
                         <span class="cell cell-header">Application time:</span>
                         <span class="cell">{{RowloanDataInfo.applicationTime}}</span>
                       </el-col>
                       <el-col :span="8">
                         <span class="cell cell-header">Payment time:</span>
                         <span class="cell">{{RowloanDataInfo.paymentTime}}</span>
                       </el-col>
                     </el-row>
                    <el-row :gutter="24">
                      <el-col :span="8">
                        <span class="cell cell-header">Repayment date:</span>
                        <span class="cell">{{RowloanDataInfo.repaymentTime}}</span>
                      </el-col>
                      <el-col :span="8">
                        <span class="cell cell-header">Repayment Amount:</span>
                        <el-popover
                          placement="bottom"
                          title="REPAYMENT INFO."
                          width="215"
                          trigger="click"
                          content="">
                          <div class="cardInfo">
                            <p style="width: 100%;border-bottom: 1px solid #DDDDDD;"></p>
                            <p>
                              <span class="cell cell-header"    >Principal:</span>
                              <span class="cell" style="color: #EAC600;"> ₦ {{ RowloanDataInfo.principal || '0'}}</span>
                            </p>
                            <p>
                              <span class="cell cell-header">Interest:</span>
                              <span class="cell" style="color: #EAC600;"> ₦ {{ RowloanDataInfo.interest || '0'}}</span>
                            </p>
                            <p>
                              <span class="cell cell-header">Service fee:</span>
                              <span class="cell" style="color: #EAC600;"> ₦ {{ RowloanDataInfo.serviceFee || '0'}}</span>
                            </p>
                            <p>
                              <span class="cell cell-header">Penalty: </span>
                              <span class="cell" style="color: #EAC600;"> <span > ₦ {{ RowloanDataInfo.penalty || '0'}} </span>
                               </span>
                            </p>
                            <p>
                              <span class="cell cell-header">Transaction fee: </span>
                              <span class="cell" style="color: #EAC600;"> <span > ₦ {{ RowloanDataInfo.transationFree|| '0'}} </span>
                               </span>
                            </p>
                            <p>
                              <span class="cell cell-header">Coupon: </span>
                              <span class="cell" style="color: #EAC600;"> <span >{{ RowloanDataInfo.coupon}} </span>
                               </span>
                            </p>
                          </div>
                          <span class="cell" style="color: #EAC600;" slot="reference" >₦ {{ RowloanDataInfo.repaymentAmount}}</span>
<!--                          <span class="cell" style="cursor: pointer;" slot="reference">{{dataInfo.totalLimit || 'null'}} ₦</span>-->
                        </el-popover>
                      </el-col>
                      <el-col :span="8">
                        <span class="cell cell-header">Remaining repayments:</span>
                        <el-popover
                          placement="bottom"
                          title="REMAINING INFO."
                          width="260"
                          trigger="click"
                          content="">
                          <div class="cardInfo">
                            <p style="width: 100%;border-bottom: 1px solid #DDDDDD;"></p>
                            <p>
                              <span class="cell cell-header"    >Remaining Principal:</span>
                              <span class="cell" style="color: #EAC600;"> ₦ {{ RowloanDataInfo.remainingLoanPrincipal || '0'}}</span>
                            </p>
                            <p>
                              <span class="cell cell-header">Remaining Interest:</span>
                              <span class="cell" style="color: #EAC600;"> ₦ {{ RowloanDataInfo.remainingInterest || '0'}}</span>
                            </p>
                            <p>
                              <span class="cell cell-header">Remaining Service fee:</span>
                              <span class="cell" style="color: #EAC600;"> ₦ {{ RowloanDataInfo.remainingServiceFee || '0'}}</span>
                            </p>
                            <p>
                              <span class="cell cell-header">Remaining Penalty: </span>
                              <span class="cell" style="color: #EAC600;"> <span > ₦ {{ RowloanDataInfo.remainingLateFee || '0'}} </span>
                               </span>
                            </p>
                            <p>
                              <span class="cell cell-header">Remaining Transaction fee: </span>
                              <span class="cell" style="color: #EAC600;"> <span > ₦ {{ RowloanDataInfo.transationFree|| '0'}} </span>
                               </span>
                            </p>
                            <p>
                              <span class="cell cell-header">Remaining Coupon: </span>
                              <span class="cell" style="color: #EAC600;"> <span >{{ RowloanDataInfo.coupon}} </span>
                               </span>
                            </p>
                          </div>
                          <span class="cell" style="color: #EAC600;" slot="reference" >₦ {{ RowloanDataInfo.remainingRepayments}}</span>
                        </el-popover>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              <br/>
              <el-card>
                <div slot="header">
                  <el-row :gutter="24">
                    <el-col :span="3">
                      <span class="font_bold">EXTENSION.</span>
                    </el-col>
                  </el-row>
                  <br/>
                  <el-row :gutter="24">
                    <el-col :span="13">
                      <span class="cell cell-header">Extension Repayment date: </span>
                      <span class="font_bold" style="color: #33b016;">  {{RowloanDataInfo.newRepaymentDate}}</span>
                    </el-col>
                    <el-col :span="8">
                      <el-button
                        :disabled = "Deferred"
                        type="warning"
                        plain
                        @click="DeferredInfo(RowloanDataInfo.loanSerialNo)"
                        size="small"
                      >Loan Extension
                      </el-button>
                    </el-col>
                  </el-row>
                </div>
                <div class=" DebitTable el-table el-table--enable-row-hover el-table--medium cardInfo">
                  <el-table
                    :data="LoanDeferredOrderList"
                    style="width: 100%">
                    <el-table-column prop="createTime" label="Application time" width="220px" ></el-table-column>
                    <el-table-column prop="numDeferredDay" label="Extension days" ></el-table-column>
                    <el-table-column prop="minRepay" label="Min repay" ></el-table-column>
                    <el-table-column prop="newRepaymentDate" label="Extension Repayment date" width="200px"></el-table-column>
                    <el-table-column prop="status" label="Status" align="center" >
                      <template slot-scope="scope">
                        <span v-if="scope.row.status == '0'" style="color: #cc1e11;cursor: no-drop;" >Failure</span>
                        <span v-if="scope.row.status == '1'" style="color: rgba(44,197,26,0.96);cursor: no-drop;">Succeed</span>
                        <span v-if="scope.row.status == '9'" style="color: rgba(232,215,26,0.96);cursor: no-drop;">Pending</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="LoanDeferredOrdertotal>0"
                    :total="LoanDeferredOrdertotal"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                  />
                </div>
              </el-card>
                <br/>
                <el-card>
                  <div slot="header">
                    <span class="font_bold">REPAYMENT RECORD.</span>
                  </div>
                  <div class=" DebitTable el-table el-table--enable-row-hover el-table--medium cardInfo">
                      <el-table
                          :data="DebitList"
                          style="width: 100%">
                          <el-table-column prop="amountPaid" label="Amount paid"></el-table-column>
                          <el-table-column prop="modeOfPayment" label="Method of payment" width="250px"></el-table-column>
                          <el-table-column prop="paymentDate" label="Payment date"></el-table-column>
                          <el-table-column label="Status" align="center" prop="status">
                            <template slot-scope="scope">
                              <span style="color: #FF4646" v-if='scope.row.status == "Failure"'>
                                {{scope.row.status}}
                              </span>
                              <span style="color: #13C66C" v-if='scope.row.status == "Succeed"'>
                               {{scope.row.status}}
                              </span>
                              <span style="color: rgba(232,215,26,0.96)" v-if='scope.row.status == "Pending"'>
                               {{scope.row.status}}
                              </span>
                              <span style="color: #FF4646" v-if='scope.row.status == "Cancel"'>
                               {{scope.row.status}}
                              </span>
                            </template>
                          </el-table-column>
                        </el-table>
                  </div>
                  <p class="cell">All repaid：<span style="color: #EA7807;">
                     {{AllRepaid}}
                   </span></p>
                   <div style="display: inline-block;" v-if="statusTitle == 'Overdue' || statusTitle == 'Outstanding'">
                     <span>Send the repayment account to：</span>
                      <el-dropdown @command="handleCommand" >
                        <span class="el-dropdown-link">
                          {{Debitvalueing}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                       <el-dropdown-menu slot="dropdown" class="Debitdropdown">
                          <el-dropdown-item :command="Debitvalue" >{{Debitvalue}}</el-dropdown-item>
                          <el-input v-model="DebitSelectvalue" placeholder="请输入内容"></el-input>
                          <button type="button" class="DebitConfirmBtn" @click="DebitConfirmBtn()">Confirm</button>
                        </el-dropdown-menu>
                      </el-dropdown>
                   </div>
                   <button type="button" class="SendBTn" v-if="statusTitle == 'Overdue' || statusTitle == 'Outstanding'" @click="Send()">Send</button>
                </el-card>

                <!-- <div slot="footer" class="dialog-footer">
                  <el-button @click="loan = false">关闭</el-button>
                </div> -->
            </div>

          </el-dialog>
  </div>
</template>

<script>

import {
  customerFindcount,
  sendcollectsmsFun,
  LoanHistoryViewFun,
  LoanHistoryListdetailFun,
  LoanHistoryListFun,
  WalletHistoryListFun,
  ATMCardListFun,
  AccountBankListFun,
  GetLimitListFun,
  KYCListFun,
  getLoanIouDetail,
  getManagementloanDataList,
  managementloanDatalist,
  walletViewFun,
  walletListdetailFun,
  LoanDeferredOrderFun,
  DeferredInfoFun
} from "@/api/bizsys/cust_management_loan_data";
import {mapGetters} from 'vuex'
export default {
  name: "customerData",
  data() {
    return {
      //钱包流水条数
      WalletInfototal:0,
      //延期订单数
      LoanDeferredOrdertotal:0,
      // 订单类型字典
      orderTypeOptions: [],
      // 钱包类型字典
      walletTypeOptions: [],
      // 订单状态字典
      orderStatusOptions: [],
      // 状态字典
      stateOptions: [],
      tabLoading:false,
      viewId:'',
      AllRepaid:'',//总金额
      statusTitle:"",//借据详情弹窗显示的状态
      RowloanDataInfo:'',//借据详情弹窗
      WalletDataInfo:'',//钱包明细数据
      DeferredDataInfo:'',//延期明细数据
      Deferred:true,//延期明细数据
      DebitSelectvalue:'',
      Debitvalue:'数据数据展示',//注册手机号
      Debitvalueing:'',
      Debitoptions:[
        {
              value: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            },
      ],
      KYCStatus:false,//kyc的禁用状态
      KYCtotal:0,//kyc数据的总条数
      KYCParams:{
        pageNum:1,//kyc列表第几页
        pageSize:10,//kyc一页显示多少条
      },
      GetlimitStatus:false,//kyc的禁用状态
      Getlimittotal:0,//kyc数据的总条数
      GetlimitParams:{
        pageNum:1,//kyc列表第几页
        pageSize:10,//kyc一页显示多少条
      },
      AccountBankStatus:false,//AccountBank的禁用状态
      AccountBanktotal:0,//kyc数据的总条数
      AccountBankParams:{
        pageNum:1,//kyc列表第几页
        pageSize:10,//kyc一页显示多少条
      },
      ATMCardStatus:false,//ATMCard的禁用状态
      ATMCardtotal:0,//kyc数据的总条数
      ATMCardParams:{
        pageNum:1,//kyc列表第几页
        pageSize:10,//kyc一页显示多少条
      },
      LoanHistoryStatus:false,//LoanHistory禁用状态
      LoanHistorytotal:0,//kyc数据的总条数
      LoanHistoryParams:{
        pageNum:1,//kyc列表第几页
        pageSize:10,//kyc一页显示多少条
      },
      WalletHistoryStatus:false,//Wallet禁用状态
      WalletHistorytotal:0,//Wallet数据的总条数
      WalletHistoryParams:{
        pageNum:1,//kyc列表第几页
        pageSize:10,//kyc一页显示多少条
      },
      KYCList:[],//kyc的表格数据
      GetlimitList:[],//Getlimit的表格数据
      AccountBankList:[],//AccountBank的表格数据
      ATMCardList:[],////AccountBank的表格数据
      LoanHistoryList:[],////AccountBank的表格数据
      WalletHistoryList:[],////Wallet的表格数据
      DebitList:[],//Debit的表格数据
      LoanDeferredOrderList:[],//延期订单数据
      Debit:false,//还款详情弹框
      WalletDebitList:[],//钱包的表格数据
      WalletDebit:false,//钱包详情弹框
      DeferredDebit:false,//延期产品详情弹框
      DeferredDebitList:[],//延期产品表格数据
      activeName:"",//选中的表格
      subMitStatus:false, //按钮禁用
      AndonBtnStatus:false, //弹窗显示状态
      Loading:'',
      textarea2:'',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //查询客户详情
      dataInfo: [],
      // 查询提现记录
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        custNo: undefined
      },
      loan: false,
      //查询客户详情
      loanDataInfo: [],
      // 表单参数
      form: {}
      /*// 表单校验
      rules: {
        dictLabel: [
          {required: true, message: "数据标签不能为空", trigger: "blur"}
        ]
      }*/
    };
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device',
      'name',
      'email'
    ]),
  },
  created() {
    this.getList(this.$route.params && this.$route.params.custNo);
    console.log('请求一遍')
     this.customerFindcountFun(this.$route.params.custNo)

    this.getDicts("wallet_order_type").then(response => {
      this.orderTypeOptions = response.data;
    });
    this.getDicts("wallet_type").then(response => {
      this.walletTypeOptions = response.data;
    });
    this.getDicts("wallet_order_status").then(response => {
      this.orderStatusOptions = response.data;
    });
    this.getDicts("state").then(response => {
      this.stateOptions = response.data;
    });
    this.getDicts("change_type").then(response => {
      this.changeTypeOptions = response.data;
    });
    this.getDicts("funds_type").then(response => {
      this.fundsTypeOptions = response.data;
    });
    this.getDicts("state").then(response => {
      this.stateOptions = response.data;
    });
  },
  mounted() {

  },
  methods: {
    // 变更类型字典翻译
    changeTypeFormat(row, column) {
      return this.selectDictLabel(this.changeTypeOptions, row.changeType);
    },
    // 资金类型字典翻译
    fundsTypeFormat(row, column) {
      return this.selectDictLabel(this.fundsTypeOptions, row.fundsType);
    },
    // 状态字典翻译
    stateFormat(row, column) {
      return this.selectDictLabel(this.stateOptions, row.state);
    },

    // 订单类型字典翻译
    orderTypeFormat(row, column) {
      return this.selectDictLabel(this.orderTypeOptions, row.orderType);
    },
    // 钱包类型字典翻译
    walletTypeFormat(row, column) {
      return this.selectDictLabel(this.walletTypeOptions, row.walletType);
    },
    // 订单状态字典翻译
    orderStatusFormat(row, column) {
      return this.selectDictLabel(this.orderStatusOptions, row.orderStatus);
    },
    tabClickChangeFun(){
        if(this.activeName == 'one'){
            this.KYCgetList()
        }else if(this.activeName == 'two'){
            this.GetlimitgetList()
        }else if(this.activeName == 'three'){
            this.AccountBankgetList()
        }else if(this.activeName == 'four'){
            this.ATMCardgetList()
        }else if(this.activeName == 'five'){
            this.LoanHistorygetList()
        }else if(this.activeName == 'six'){
          this.WalletHistorygetList()
        }
    },
    customerFindcountFun(params){
      var main = this
      customerFindcount(params).then(res => {
              var data =''
               if(res.code ==200){
                   data = [res.data.walletHistoryCount,res.data.loanHistoryCount,res.data.atmCardCount,res.data.accountBankCount,res.data.getLimitCount,res.data.kycCount]
                 if(data[0] == 0){
                   this.WalletHistoryStatus = true
                 }else{
                   this.activeName = 'six'
                 }
                 if(data[1] == 0){
                        this.LoanHistoryStatus = true
                   }else{
                        this.activeName = 'five'
                   }
                   if(data[2] == 1){
                        this.ATMCardStatus = true
                   }else{
                        this.activeName = 'four'
                   }
                   if(data[3] == 0){
                        this.AccountBankStatus = true
                   }else{
                        this.activeName = 'three'
                   }
                   if(data[4] == 0){
                        this.GetlimitStatus = true
                   }else{
                        this.activeName = 'two'
                   }
                   if(data[5] == 0){
                        this.KYCStatus = true
                   }else{
                        this.activeName = 'one'
                   }
                   var main = this
                   setTimeout(function(){
                     main.tabClickChangeFun()
                     main.loading = false;
                   },50)
               }
       });
    },
    // 发送短信的接口
    Send(){
      // this.Debitvalueing 短信号码 dataInfo.custNo
      var params = {
        custNo:this.dataInfo.custNo,
        register:this.Debitvalueing,
        id:this.viewId
      }
      var main = this
      sendcollectsmsFun(params).then(res => {
               if(res.code ==200){
                    // this.RowloanDataInfo = response.data
                    main.$message({
                      message: res.msg,
                      type: 'success'
                    });
               }
       });
    },
    DebitFun(id,status){
      this.loan = true
      this.statusTitle = status
      LoanHistoryListdetailFun(id).then(response => {
               if(response.code ==200){
                    this.RowloanDataInfo = response.data
               }
       });
    },
    DebitConfirmBtn(){
      this.Debitvalueing = this.DebitSelectvalue
    },
    handleCommand(command) {
      this.Debitvalue = command
      this.Debitvalueing= command
      console.log('[[09090909]]',command)
    },
    LoanHistorygetList(){
      var main = this
      this.tabLoading = true;
      return LoanHistoryListFun({custNo:this.$route.params.custNo,pageNum:main.LoanHistoryParams.pageNum,pageSize:main.LoanHistoryParams.pageSize}).then(response => {
               this.tabLoading = false;
               if(response.code ==200){
                    main.LoanHistoryList = response.rows;
                    main.LoanHistorytotal = response.total
               }
               return main.LoanHistorytotal
       });
    },
    WalletHistorygetList(){
      var main = this
      this.tabLoading = true;
      return WalletHistoryListFun({custNo:this.$route.params.custNo,pageNum:main.WalletHistoryParams.pageNum,pageSize:main.WalletHistoryParams.pageSize}).then(response => {
        this.tabLoading = false;
        if(response.code ==200){
          main.WalletHistoryList = response.rows;
          main.WalletHistorytotal = response.total
        }
        return main.WalletHistorytotal
      });
    },
    ATMCardgetList(){
      var main = this
      this.tabLoading = true;
      return ATMCardListFun({custNo:this.$route.params.custNo,pageNum:main.ATMCardParams.pageNum,pageSize:main.ATMCardParams.pageSize}).then(response => {
               this.tabLoading = false;
               if(response.code ==200){
                    main.ATMCardList = response.rows;
                    main.ATMCardtotal = response.total
               }
               return main.ATMCardtotal
       });
    },
    AccountBankgetList(){
      var main = this
      this.tabLoading = true;
      return AccountBankListFun({custNo:this.$route.params.custNo,pageNum:main.AccountBankParams.pageNum,pageSize:main.AccountBankParams.pageSize}).then(response => {
               this.tabLoading = false;
               if(response.code ==200){
                    main.AccountBankList = response.rows;
                    main.AccountBanktotal = response.total
               }
               return main.AccountBanktotal
       });
    },
    GetlimitgetList(){
      var main = this
      this.tabLoading = true;
      return GetLimitListFun({custNo:this.$route.params.custNo,pageNum:main.GetlimitParams.pageNum,pageSize:main.GetlimitParams.pageSize}).then(response => {
               this.tabLoading = false;
               if(response.code ==200){
                    main.GetlimitList = response.rows;
                    main.Getlimittotal = response.total
               }
               return main.Getlimittotal
       });
    },
    KYCgetList(){
      var main = this
      this.tabLoading = true;
      return KYCListFun({custNo:this.$route.params.custNo,pageNum:main.KYCParams.pageNum,pageSize:main.KYCParams.pageSize}).then(response => {
               this.tabLoading = false;
               if(response.code ==200){
                    main.KYCList = response.rows;
                    main.KYCtotal = response.total
               }
               return main.KYCtotal
       });
    },
    subMit(){
      if(this.subMitStatus == true){
         return
      }
      this.subMitStatus = true
      this.Loading = this.$loading({
        lock: true,
        text: "loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      var main = this
      var data = {
                 "system":"Customer",//客服系统
                 "submitterTag":this.email,
                 "customerId":this.dataInfo.custNo,
                 "problemDescription":this.textarea2,
                 "problemFrom":"Customer service-Customer Management"
                 }
	  this.rq.post('https://notice.linkcredit.ng/api/andon/submit',data).then(res=>{
          main.subMitStatus = false //按钮可用
          main.Loading.close();
           if(res.data.data == true){
               main.AndonBtnStatus = false //关闭弹窗
			         main.textarea1 = ''
                main.$message({
                  message: res.data.msg,
                  type: 'success'
                });
           }else{
                main.$message({
                  message: res.data.msg,
                  type: 'error'
                });
           }
      })
    },
    KYCListFunction(params,callback){
         // KYCListFun({custNo:params.custNo,pageNum:params.pageNum,pageSize:params.pageSize}).then(response => {
         //   callback(response)
         //  });
    },
    /** 查询提现记录 */
    getList() {
      this.queryParams.custNo = this.$route.params && this.$route.params.custNo;
      // this.loading = true;
      var main = this
      getManagementloanDataList(this.queryParams.custNo).then(response => {
        this.dataInfo = response.data;
        this.Debitvalue = this.dataInfo.registrationMobile
        this.Debitvalueing = this.dataInfo.registrationMobile
      });
      // managementloanDatalist(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      //   this.dataList = response.rows;
      //   this.total = response.total;
      //   // this.loading = false;
      // });

    },
    loanInfo(row) {
      this.Debit = true
      this.viewId = row.id
      const loanSerialNo = row.loanSerialNo
      LoanDeferredOrderFun({custNo:this.$route.params.custNo}).then(response => {
        if(response.code ==200){
          this.LoanDeferredOrderList = response.rows;
          this.LoanDeferredOrdertotal = response.total
        }
      });
      LoanHistoryViewFun(loanSerialNo).then(response => {
        this.DebitList = response.data.data;
        this.AllRepaid =response.data.AllRepaid
      });
      this.statusTitle = row.state
      LoanHistoryListdetailFun(row.id).then(response => {
               if(response.code ==200){
                    this.RowloanDataInfo = response.data
               }
       });
      this.DeferredDebit = false
      DeferredInfoFun({custNo:this.$route.params.custNo,loanSerialNo:loanSerialNo}).then(response => {
        debugger
        if(response.data.sevenExtensionDays == null){
          this.Deferred = true
        }else {
          this.Deferred = false
        }
        });
    },
    walletInfo(){
      this.WalletDebit = true
      var main = this
      walletViewFun({custNo:this.$route.params.custNo}).then(response => {
        if(response.code ==200){
          main.WalletDebitList = response.rows;
          main.WalletInfototal = response.total
        }
      });
      walletListdetailFun({custNo:this.$route.params.custNo}).then(response => {
        if(response.code ==200){
          main.WalletDataInfo = response.data
        }
      });
    },
    DeferredInfo(loanSerialNo){
      this.DeferredDebit = false
      var main = this
      DeferredInfoFun({custNo:this.$route.params.custNo,loanSerialNo:loanSerialNo}).then(response => {
        if(response.code ==200 ){
          main.DeferredDataInfo = response.data
          main.DeferredDebit = true
        }
      });
    },
  }
};

</script>

<style type="text/css" scoped>
  .pagination-container{
    padding: 5px 20px !important;
  }
  .AndonBtn{
    vertical-align: bottom;
    margin-top: 0px;
    position: absolute;
    right: 20px;
    top:23px
  }
</style>
<style>
.cardInfo .cell{
  font-weight: bold;
  color: #2C3C3C;
  padding-left: 0px;
}
.cardInfo .el-row{
  margin-bottom: 10px;
}
.cell-width-first {
  width: 15%;
}

.cell-header {
  color: #2C3C3C;
  font-weight: normal !important;
}

.cell-width {
  width: 16.67%
}
.el-table th.is-leaf, .el-table td{
  border-bottom: 0px solid #dfe6ec !important;
}
.el-table .el-table__header-wrapper th{
  background-color: #FFFEEB;
}

/* detail弹框按钮close图标 */
.el-dialog__headerbtn .el-dialog__close{
  /* border: 1px solid #666666;
  border-radius: 15px;
  width: 30px;
  line-height: 28px;
  height: 30px;
  color: #666666; */
  font-size: 20px;
}
.cmlDetails{
  width: 65%;
  border-radius: 20px;
}

.cml{
  width: 70%;
  border-radius: 20px;
}
.fixedColumn{
  float: left;
  height: 100%;
  width: 100px;
}
.flxeibleColumn{
  height: 100%;
}
.marginLeft150{
  margin-left: 150px;
}
.flxeibleColumn .el-card.is-always-shadow{
  box-shadow: 0 0px 0px 0 rgb(0 0 0 / 10%);
  border: 0px solid red;
}
.font_bold{
  font-weight: bold;
  color: #2C3C3C;
}
.color_13C66C{
  color: #13C66C !important;
}
.bgc{
  background: #FFEFEF;
  opacity: 1;
  border-radius: 6px;
  font-weight: normal !important;
  color: #FF4646 !important;
  padding: 10px !important;
}
.w_100{
  width: 100px;
  margin-left: 30px;
}
.color_EA7807{
  color: #EA7807 !important;
}

.cardTab{
  /* border: 1px solid transparent; */
}
.cardTab .el-tabs__item{
  font-weight: normal;
}
.cardTab .el-tabs--card > .el-tabs__header{
  margin-bottom: 5px !important;
}
.cardTab .el-tabs__item.is-disabled{
  cursor: no-drop;
  background-color: #EEEEEE !important;
  color: #CCCCCC !important;
}
.cardTab .el-tabs--card > .el-tabs__header .el-tabs__item.is-active{
  background-color: #EADD07 !important;
  color: #2C3C3C !important;
}
.tablePopover .title{
  font-size: 14px;
  font-weight: bold;
  color: #2C3C3C;
  margin-bottom: 14px;
}
.tablePopover  .text{
  font-size: 14px;
  font-weight: 400;
  color: #2C3C3C;
}
.updatedBtn{
  margin-top: 20px;
  float: right;
  width: 130px;
  height: 35px;
  background: rgba(255, 255, 255, 0.39);
  border: 1px solid #EAC600;
  opacity: 1;
  border-radius: 4px;
  font-size: 12px;
  color: #EAC600;
}
.DebitTable{
  max-height: 240px;
  overflow-y: auto;
}
.DebitTable .el-table__header-wrapper th{
  background-color: #ffffff !important;
}
.DebitTable .el-table__header-wrapper th .cell{
  font-weight: normal !important;
}
.SendBTn{
  width: 90px;
  height: 35px;
  line-height: 35px;
  background: rgba(234, 221, 7, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  color: #2C3C3C;
  border: 0px solid red;
  margin-left: 14px;
  cursor: pointer;
}
.DebitConfirmBtn{
  width: 180px;
  height: 35px;
  background: rgba(234, 221, 7, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  color: #2C3C3C;
  border: 0px solid red;
  margin-top: 8px;
}
.Debitdropdown{
  width:200px;
  text-align: center;
  padding: 8px;
}
.DebitTable  .cell{
  padding-left: 20px !important;
}
.wordBreak{
  word-break: break-word;
  text-align: left;
}
</style>
